<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
    <el-card shadow="hover" class="inventory-warning-card">
        <template #header>
            <div class="card-header">
                <div class="title-with-icon">
                    <Icon name="fa fa-exclamation-triangle" class="title-icon" />
                    <span>{{ t('库存预警') }}</span>
                </div>
                <div class="header-actions">
                    <el-radio-group v-model="warningType" size="small" @change="changeWarningType">
                        <el-radio-button label="low">{{ t('低库存') }}</el-radio-button>
                        <el-radio-button label="high">{{ t('高库存') }}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </template>
        <div v-loading="loading" class="warning-list-container">
            <div v-if="warningList.length === 0" class="empty-data">
                <Icon name="fa fa-check-circle" class="empty-icon" />
                <span>{{ t('暂无预警信息') }}</span>
            </div>
            <el-table v-else :data="warningList" style="width: 100%" size="small" :max-height="220">
                <el-table-column :label="t('商品')" min-width="120">
                    <template #default="scope">
                        <div class="product-info">
                            <el-avatar :size="32" :src="scope.row.image" shape="square">
                                <Icon name="fa fa-shopping-bag" />
                            </el-avatar>
                            <div class="product-detail">
                                <div class="product-name" :title="scope.row.name">{{ scope.row.name }}</div>
                                <div class="product-code">{{ scope.row.code }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="t('仓库')" prop="warehouse" width="80" />
                <el-table-column :label="t('当前库存')" width="85">
                    <template #default="scope">
                        <span :class="{'text-danger': warningType === 'low', 'text-warning': warningType === 'high'}">
                            {{ scope.row.current }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :label="t('安全库存')" prop="safe" width="85" />
                <el-table-column :label="t('状态')" width="100">
                    <template #default="scope">
                        <el-tag v-if="warningType === 'low'" type="danger" size="small" effect="light">
                            {{ t('库存不足') }}
                        </el-tag>
                        <el-tag v-else type="warning" size="small" effect="light">
                            {{ t('库存积压') }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="60">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleAction(scope.row)">
                            {{ warningType === 'low' ? t('采购') : t('促销') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <div v-if="warningList.length > 0" class="view-more">
                <el-button link type="info" size="small">
                    {{ t('查看更多') }} <Icon name="fa fa-angle-right" />
                </el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import Icon from '/@/components/icon/index.vue'

const { t } = useI18n()
const loading = ref(false)
const warningType = ref('low')

// 模拟低库存预警商品数据
const lowStockData = [
    {
        id: 1,
        name: '高档办公椅',
        code: 'BGY-001',
        image: 'https://via.placeholder.com/40/87CEEB/ffffff?text=椅子',
        warehouse: '总仓',
        current: 5,
        safe: 20,
    },
    {
        id: 2,
        name: 'LED显示器24寸',
        code: 'DSP-240',
        image: 'https://via.placeholder.com/40/90EE90/ffffff?text=显示器',
        warehouse: '北京仓',
        current: 3,
        safe: 15,
    },
    {
        id: 3,
        name: '机械键盘青轴',
        code: 'KEY-087',
        image: 'https://via.placeholder.com/40/FFB6C1/ffffff?text=键盘',
        warehouse: '上海仓',
        current: 2,
        safe: 10,
    },
    {
        id: 4,
        name: '无线鼠标',
        code: 'MOU-112',
        image: 'https://via.placeholder.com/40/FFD700/ffffff?text=鼠标',
        warehouse: '广州仓',
        current: 7,
        safe: 25,
    },
    {
        id: 5,
        name: '笔记本电脑',
        code: 'LAP-156',
        image: 'https://via.placeholder.com/40/C0C0C0/ffffff?text=笔记本',
        warehouse: '上海仓',
        current: 4,
        safe: 12,
    }
]

// 模拟高库存预警商品数据
const highStockData = [
    {
        id: 6,
        name: '普通文件柜',
        code: 'CAB-023',
        image: 'https://via.placeholder.com/40/D3D3D3/ffffff?text=柜子',
        warehouse: '总仓',
        current: 120,
        safe: 50,
    },
    {
        id: 7,
        name: '滑轮办公椅',
        code: 'CHR-045',
        image: 'https://via.placeholder.com/40/A9A9A9/ffffff?text=椅子',
        warehouse: '广州仓',
        current: 85,
        safe: 40,
    },
    {
        id: 8,
        name: '标准A4打印纸',
        code: 'PPR-A4',
        image: 'https://via.placeholder.com/40/FFFFFF/333333?text=纸张',
        warehouse: '北京仓',
        current: 180,
        safe: 100,
    },
    {
        id: 9,
        name: '圆珠笔(蓝色)',
        code: 'PEN-BL',
        image: 'https://via.placeholder.com/40/6495ED/ffffff?text=笔',
        warehouse: '成都仓',
        current: 300,
        safe: 150,
    }
]

const warningList = ref(lowStockData)

// 切换预警类型
const changeWarningType = () => {
    loading.value = true
    
    // 模拟加载过程
    setTimeout(() => {
        warningList.value = warningType.value === 'low' ? lowStockData : highStockData
        loading.value = false
    }, 500)
}

// 处理操作按钮点击
const handleAction = (row: any) => {
    if (warningType.value === 'low') {
        ElMessage.success(t('已添加 {0} 到采购计划', [row.name]))
    } else {
        ElMessage.success(t('已将 {0} 加入促销活动', [row.name]))
    }
}

// 初始化
onMounted(() => {
    // 模拟加载数据
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 600)
})
</script>

<style scoped lang="scss">
.inventory-warning-card {
    height: 360px;
    margin-bottom: 20px;
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title-with-icon {
            display: flex;
            align-items: center;
            
            .title-icon {
                color: #EF5350;
                margin-right: 8px;
                font-size: 16px;
            }
        }
        
        .header-actions {
            display: flex;
            align-items: center;
        }
    }
    
    .warning-list-container {
        height: 280px;
        
        .product-info {
            display: flex;
            align-items: center;
            
            .product-detail {
                margin-left: 10px;
                overflow: hidden;
                
                .product-name {
                    font-weight: bold;
                    font-size: 13px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                
                .product-code {
                    font-size: 12px;
                    color: #909399;
                }
            }
        }
        
        .text-danger {
            color: #EF5350;
            font-weight: bold;
        }
        
        .text-warning {
            color: #FFA726;
            font-weight: bold;
        }
        
        .empty-data {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #909399;
            
            .empty-icon {
                font-size: 48px;
                color: #67C23A;
                margin-bottom: 10px;
            }
        }
        
        .view-more {
            text-align: center;
            margin-top: 10px;
        }
    }
}

@media screen and (max-width: 768px) {
    .inventory-warning-card {
        height: auto;
        
        .warning-list-container {
            height: auto;
        }
    }
}
</style> 